<template>
  <div class="goods-spec-box" v-if="specData.length > 0">
    <template v-for="(item, index) in specData" :key="index">
      <div class="goods-spec-item">
        <div
          class="goods-spec-drag icon icon-drag"
          draggable="true"
          @dragstart.capture="specDragstart(item)"
          @dragenter.capture="specDragenter(item, $event)"
          @dragend.capture="specDragend(item, $event)"
          @dragover.capture="specDragover($event)"
        ></div>
        <div class="goods-spec-item-box">
          <div class="flex">
            <div class="goods-spec-title">
              规格名：
            </div>
            <div>
              <span>{{ item.name }}</span>
              <span
                @click="delSpecName(index)"
                class="del-spec-value icon icon-shibai1"
              ></span>
              <span class="ml20"
                ><el-switch
                  v-model="item.is_img"
                  inline-prompt
                  active-value="1"
                  inactive-value="0"
                  active-text="规格图片"
                  inactive-text="规格图片"
                  @change="changeImgStatus($event, item)"
                ></el-switch
              ></span>
            </div>
          </div>
          <div class="mt10">
            <div class="flex">
              <div class="goods-spec-title">规格值：</div>
              <el-input
                class="form-item-small"
                size="small"
                v-model="specValue[index]"
                placeholder="请输入规格值"
              >
                <template #suffix>
                  <div class="form-item-btn" @click="createSpecValue(index)">
                    添加
                  </div>
                </template>
              </el-input>
            </div>
            <div class="goods-spec-value-box">
              <template v-for="(items, idx) in item.value" :key="idx">
                <div class="goods-spec-value-item">
                  <span
                    class="goods-spec-value-item-drag icon icon-drag"
                    draggable="true"
                    @dragstart="specValueDragstart(index, items)"
                    @dragenter="specValueDragenter(index, items, $event)"
                    @dragend="specValueDragend(index, items, $event)"
                    @dragover="specValueDragover($event)"
                  ></span>
                  <span v-if="item.is_img == 1" class="mr10">
                    <upload-btn
                      v-model="items.img"
                      width="30px"
                      height="30px"
                      padding="0"
                      count="1"
                    ></upload-btn>
                  </span>
                  <span>{{ items.name }}</span>
                  <span
                    @click="delSpecValue(index, idx)"
                    class="del-spec-value icon icon-shibai1"
                  ></span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeGoodsSpec",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance, watch } from "vue";
const props = withDefaults(
  defineProps<{
    modelValue?: any;
  }>(),
  {
    modelValue: [],
  }
);

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["update:modelValue"]);

const specData = ref<any>(props.modelValue);

const createSpecValue = (index: number) => {
  if (specValue.value[index] == "" || specValue.value[index] == undefined) {
    $utils.errorMsg("请输入规格值");
    return false;
  }
  if (specValue.value[index].indexOf(" ") !== -1) {
    $utils.errorMsg("规格值不能包含空格");
    return false;
  }
  specData.value[index].value.push({
    name: specValue.value[index],
  });
  specValue.value[index] = "";
};

const specValue = ref<any>([]);

const delSpecName = (index: number) => {
  specData.value.splice(index, 1);
};

const delSpecValue = (index: number, idx: number) => {
  specData.value[index].value.splice(idx, 1);
};

const specOldItem = ref<any>();

const specNewItem = ref<any>();

const specDragstart = (value: any) => {
  specOldItem.value = value;
};

const specDragend = (value: any, e: any) => {
  if (specOldItem.value !== specNewItem.value) {
    let oldIndex = specData.value.indexOf(specOldItem.value);
    let newIndex = specData.value.indexOf(specNewItem.value);

    let newItems = [...specData.value];
    newItems.splice(oldIndex, 1);
    newItems.splice(newIndex, 0, specOldItem.value);
    specData.value = [...newItems];
  }
};

const specDragenter = (value: any, e: any) => {
  specNewItem.value = value;
  e.preventDefault();
};

const specDragover = (e: any) => {
  e.preventDefault();
};

const specValueOldItem = ref<any>();

const specValueNewItem = ref<any>();

const specValueDragstart = (index: number, value: any) => {
  specValueOldItem.value = value;
};

const specValueDragend = (index: number, value: any, e: any) => {
  if (specValueOldItem.value !== specValueNewItem.value) {
    let oldIndex = specData.value[index].value.indexOf(specValueOldItem.value);
    let newIndex = specData.value[index].value.indexOf(specValueNewItem.value);

    let newItems = [...specData.value[index].value];
    newItems.splice(oldIndex, 1);
    newItems.splice(newIndex, 0, specValueOldItem.value);
    specData.value[index].value = [...newItems];
  }
};

const specValueDragenter = (index: number, value: any, e: any) => {
  specValueNewItem.value = value;
  e.preventDefault();
};

const specValueDragover = (e: any) => {
  e.preventDefault();
};

const changeImgStatus = (e: string | number, item: any) => {
  if (e == 0) {
    item.value.forEach((items: { img: string; name: string }) => {
      items.img = "";
    });
  }
};

const refresh = (data: any = []) => {
  specData.value = data;
};

watch(
  () => specData.value,
  (val) => {
    emit("update:modelValue", val);
  },
  { deep: true }
);

defineExpose({ refresh });
</script>
<style scoped>
.form-item-btn {
  font-size: 12px;
  line-height: 32px;
  color: var(--base-default);
  margin-left: 20px;
  cursor: pointer;
}
.form-item-small {
  width: 200px;
}
/* spac-view */
.goods-spec-box {
  width: 100%;
  max-height: 500px;
  overflow-y: scroll;
  border-radius: var(--base-radius);
  border: 1px solid var(--el-border-color);
  padding: 0 10px;
}
.goods-spec-item {
  padding: 10px;
  margin: 10px 0;
  background: #fff;
  border: 1px dashed var(--el-border-color);
  border-radius: var(--base-radius);
  display: flex;
  justify-content: start;
  align-items: center;
  width: calc(100% - 26px);
}
.goods-spec-drag {
  cursor: all-scroll;
  text-align: center;
  width: 60px;
  font-size: 24px;
  margin-right: 20px;
}
.goods-spec-title {
  width: 80px;
}
.goods-spec-item-box {
  width: calc(100% - 80px);
}
.goods-spec-value-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.goods-spec-value-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  margin-right: 10px;
  border-radius: 2px;
  border: 1px solid var(--el-border-color);
  margin-bottom: 10px;
}
.goods-spec-value-item-drag {
  cursor: all-scroll;
  text-align: center;
  width: 30px;
  font-size: 12px;
  margin-right: 5px;
}
.del-spec-value {
  color: var(--base-grey);
  font-size: 12px;
  margin-left: 10px;
  cursor: pointer;
}
.del-spec-value:hover {
  color: var(--base-red);
}
</style>